<template>
  <div class="wrapper studyPageClass" :class="{'isFullScreen': fullScreen}">
    <div class="container" ref="container">
      <div class="title_box" v-if="!fullScreen">
        <span class="title">{{subjectInfo.subjectName}}</span>
        <div class="right">
          <div class="page">{{activeQuestionIndex + 1}}/{{subjectInfo.bmOnlineSubjectContents.length}}</div>
          <div class="coin">
            <span class="coin_number">{{babyInfo.chuckCurrency}}</span>
          </div>
        </div>
      </div>

      <!-- 视频课 -->
      <div class="video_box" v-if="activeQuestion.fileType == 'video'" @click="showFullScreenMenu">
        <!-- <i class="android_play"  @click="playAudio" v-if="isAndroid && !audioPlay"></i> -->
        <video id='video' :controls="showControls" controlsList="nodownload" :class="{'fullScreen': fullScreen}" :height="videoWidth" :width="height" x5-video-player-type="h5-page" webkit-playsinline="true" playsinline="true" @canplay="audioLoad"  @ended="audioEnd" ref="video" preload="metadata" autoplay="autoplay" :src="`${activeQuestion.contentAudioUrl}`" ></video>
        <i class="right icon_fullScreen" @click="full" v-if="!fullScreen"></i>
        <i class="right_icon_showAnswer" :class="{'hide_right_icon_showAnswer': !showFullScreenAnswerArea}" v-if="showFullScreenAnswerAreaIcon" @click="clickShowFullScreenAnswerArea"></i>
      </div>

      <!-- 音频视频课 --> 
      <div class="banner" v-else @click="showFullScreenMenu">
        <img :class="{'fullScreenAudio': fullScreen}" :src="`${activeQuestion.contentImageUrl}`" :style="{height: fullScreenImgHeight}">
        <div class="audio_box">
          <audio id='audio' :controls="showControls" @canplay="audioLoad"  @ended="audioEnd" ref="audio" preload="metadata" autoplay="autoplay"  :src="`${activeQuestion.contentAudioUrl}`" ></audio>
        </div>

        <i class="right icon_fullScreen" @click="full" v-if="!fullScreen"></i>
        <i class="right_icon_showAnswer" :class="{'hide_right_icon_showAnswer': !showFullScreenAnswerArea}" v-show="showFullScreenAnswerAreaIcon" @click="clickShowFullScreenAnswerArea"></i>
      </div>

      <!-- 全屏菜单 -->
      <div v-if="fullScreen" :class="{'fullScreenMenu': fullScreen}" >
        <div class="fullScreenMenuContainer" v-show="toggleFullScreenMenuShowStatus">
          <i class="icon_prev" @click="prevQues" v-if="subjectInfo.bmOnlineSubjectContents.length > 1"></i>
          <i class="icon_play" v-if="!audioPlay" @click="playAudio"></i>
          <i class="icon_pause" v-else @click="pauseAudio"></i>
          <i class="icon_next" @click="nextQues" v-if="subjectInfo.bmOnlineSubjectContents.length > 1"></i>
          <i class="icon_reset" @click="resetAudio"></i>
          
        </div>
      </div>
      <!-- 非全屏菜单 -->
      <div v-else class="btn_box">
        <div clickVoice="true" class="btn_prev" @click="prevQues" v-if="subjectInfo.bmOnlineSubjectContents.length > 1"></div>
        <div clickVoice="true" class="btn_reset" @click="resetAudio"></div>
        <div clickVoice="true" class="btn_play" @click="playAudio" v-if="!audioPlay"></div>
        <div clickVoice="true" class="btn_pause" @click="pauseAudio" v-else></div>
        <div clickVoice="true" class="btn_next" @click="nextQues" v-if="subjectInfo.bmOnlineSubjectContents.length > 1"></div>
        <!-- <div class="btn_next" @click="nextQues" v-if="subjectInfo.bmOnlineSubjectContents.length > 1 && activeQuestion.showNextBtn"></div> -->
      </div>

      <i class="right icon_fullScreen" @click="exitFullScreen" v-show="fullScreen"></i>

      <!-- 全屏答题区域 -->
        <van-popup
          v-model="showFullScreenAnswerArea"
          class="fullscreen_answer_popup"
          style="background: #fff;"
          v-show="fullScreen"
          round
          position="bottom"
          :style="{ height: '80%' }">
          <div class="fullscreen_answer_area" v-if="activeQuestion.isInteractive == 1 && activeQuestion.showInteractive">
            <i clickVoice="true" class="btn_question_voice" @click="playQuesVoice"></i>
            <audio id='audioQues' ref="audioQues"  :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].questionAudioUrl}`" ></audio>
            <div class="answer_box" :class="answerClassNum">
              <i class="answer_item" @click="submit('A')">
                <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].firstFileUrl}`" alt="">
              </i>
              <i class="answer_item" @click="submit('B')">
                <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].secondFileUrl}`" alt="">
              </i>
              <i class="answer_item" @click="submit('C')" v-show="activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileUrl">
                <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileUrl}`" alt="">
              </i>
              <i class="answer_item" @click="submit('D')" v-show="activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileUrl">
                <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileUrl}`" alt="">
              </i>
            </div>
          </div>
        </van-popup>

      <!-- 非全屏答题区域 -->
      <div v-if="activeQuestion.isInteractive == 1 && activeQuestion.showInteractive" class="answer_area" >
        <div style="width: 100%">
          <i clickVoice="true" class="btn_question_voice" @click="playQuesVoice"></i>
          <audio id='audioQues' ref="audioQues"  :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].questionAudioUrl}`" ></audio>
          <div class="answer_box" :class="answerClassNum">
            <i class="answer_item" @click="submit('A')">
              <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].firstFileUrl}`" alt="">
            </i>
            <i class="answer_item" @click="submit('B')">
              <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].secondFileUrl}`" alt="">
            </i>
            <i class="answer_item" @click="submit('C')" v-if="activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileUrl">
              <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileUrl}`" alt="">
            </i>
            <i class="answer_item" @click="submit('D')" v-if="activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileUrl">
              <img clickVoice="true" :src="`${activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileUrl}`" alt="">
            </i>
          </div>
        </div>
      </div>
    </div>

    <audio id='trueVoice' ref="trueVoice"  src="http://www.mingxiaoclub.cn/zebraOnline/voice/answer_true.mp3" ></audio>
    <audio id='falseVoice' ref="falseVoice"  src="http://www.mingxiaoclub.cn/zebraOnline/voice/answer_false.mp3" ></audio>
    <audio id='completeVoice' ref="completeVoice"  src="http://www.mingxiaoclub.cn/zebraOnline/voice/complete.mp3" ></audio>

    <van-popup v-model="showPop"  class="answer_status_pop">
      <div class="pop_box" >
        <div class="answer_right answer" @click="showPop = false;" v-show="answer && !complete">
          <!-- v-if="showChuckAni" -->
          <div class="chuck_box" v-if="showChuckAni">
            <span>+{{addChuckNum}}</span>
            <div>
              <i class="icon_chuck"></i>
              <div v-if="!fullScreen">
                <i 
                  v-for="(item, index) in addChuckNum" 
                  :key="index" 
                  class="fly_chuck" 
                  :class="[chuckAni, aniClass(index)]"></i>
              </div>
            </div>
          </div>
          <img src="../assets/img/answer_right.png" alt="">
        </div>
        <div class="answer_error answer" @click="showPop = false" v-show="!answer && !complete">
          <img src="../assets/img/answer_error.png" alt="">
        </div>
        <div class="complete answer" @click="showPop = false;" v-show="complete">
          <div class="chuck_box" v-if="showChuckAni">
            <span>+{{addChuckNum}}</span>
            <div>
              <i class="icon_chuck"></i>
              <div v-if="!fullScreen">
                <i
                  v-for="(item, index) in addChuckNum" 
                  :key="index" 
                  class="fly_chuck" 
                  :class="[chuckAni, aniClass(index)]"></i>
              </div>
            </div>
          </div>
          <img src="../assets/img/complete.png" alt="">
        </div>

        
      </div>
    </van-popup>

    
  </div>
</template>

<style>


.studyPageClass .van-popup{
  background-color: transparent;
}
.isFullScreen .answer_status_pop .pop_box {
  background: rgba(0, 0, 0, .5) !important;
}
/* .van-overlay {
  z-index: 999999999 !important;
} */
</style>
<style scoped>
.fullScreenMenuContainer {
  width: 100%;
  height: 100%;
  /* background: linear-gradient(bottom, rgba(0,0,0,.4), transparent); */
  display: flex;
  align-items: center;
  
  padding: 0 .266667rem 0 0;
  box-sizing: border-box;

}
.right_icon_showAnswer {
  display: inline-block;
  width: .933333rem;
  height: .933333rem;
  background: url('../assets/img/right_icon_showAnswer.png') 0 0 no-repeat;
  background-size: contain;
  transform: rotate(270deg) translateY(-50%) translateX(0);
  transition: transform .3s;
  transform-origin: 50% 0;
  position: absolute;
  right: 46%;
  bottom: -2%;
  z-index: 9999999;
}
.hide_right_icon_showAnswer {
  transform: rotate(90deg) translateY(-50%) translateX(0) !important;
  transition: transform .3s !important;
  transform-origin: 50% 0;
}

.showAni {
  transform: rotate(270deg) translateY(-50%) translateX(.933333rem);
  transition: transform .3s !important;
  transform-origin: 50% 0;
}

@keyframes fadeIn {
  0% { transform: translateX(-30px)}
  100% { transform: translateX(0) }
}



.fullscreen_answer_popup {
  background: linear-gradient(360deg,rgba(255,240,143,1) 0%,rgba(255,226,127,1) 100%) !important;
  z-index: 99999 !important;
  overflow: hidden;
}
.fullscreen_answer_area {
  /* transform: rotate(90deg);
  transform-origin: 50% 54%; */
}

.fullscreen_answer_area .answer_box {
  /* flex-wrap: wrap;
  width: 85%; */
}
.fullscreen_answer_area i {
  position: absolute;
}
.fullscreen_answer_area .four i:nth-child(1){
  bottom: 60%;
  right: 10%;
}
.fullscreen_answer_area .four i:nth-child(2){
  bottom: 15%;
  right: 10%;
}
.fullscreen_answer_area .four i:nth-child(3){
  bottom: 60%;
  right: 52%;
}
.fullscreen_answer_area .four i:nth-child(4){
  bottom: 15%;
  right: 52%;
}

.fullscreen_answer_area .three i:nth-child(1){
  bottom: 67%;
}
.fullscreen_answer_area .three i:nth-child(2){
  bottom: 37%;
}
.fullscreen_answer_area .three i:nth-child(3){
  bottom: 7%;
}

.fullscreen_answer_area .two i:nth-child(1){
  bottom: 60%;
}
.fullscreen_answer_area .two i:nth-child(2){
  bottom: 18%;
}

.fullscreen_answer_area .btn_question_voice { 
  width: 2.033333rem;
  height: 1.746667rem;
  position: absolute;
  right: 0;
  bottom: 0 !important;
  left: auto;
  top: auto;
  transform: rotate(-90deg);
}

.fullScreen .answer_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
}

.isFullScreen .answer_status_pop .pop_box > div img{
  transform: rotate(90deg);
}
.answer_status_pop {
  z-index: 9999999999 !important;
}



.wrapper {
  /* margin-bottom: 1.333333rem; */
}
.container {
  position: relative;
  height: 100%;
  margin-bottom: 1.306667rem;
}
.isFullScreen {
  overflow: hidden;
}
.isFullScreen .container {
  margin-bottom: 0;
}
.title_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .4rem 0 .4rem .3rem;
}
.title_box .right {
  display: flex;
  align-items: center;
}
.title_box .title, .title_box .page {
  color: #FE8697;
  font-size: .426667rem;
  font-weight: bold;
}
.title_box .title:before {
  content: '';
  display: inline-block;
  width: 0.626667rem;
  height: 0.386667rem;
  background: url('../assets/img/icon_classTitle.png') 0 0 no-repeat;
  background-size: contain;
}
.title_box .page {
  margin-left: .133333rem;
}
.banner {
  position: relative;
  font-size: 0;
  height: auto;
}
.isFullScreen .banner {
  height: 100%;
  background: #fff;
  z-index: 99;
}
.audio_box {
  /* position: absolute; */
  bottom: 0;
  width: 100%;
}
.video_box {
  overflow: hidden;
  position: relative;
  font-size: 0;
}
.video_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.isFullScreen .video_box {
  width: 100%;
  height: 100%;
  background: #000;
}
#audio {
  width: 100%;
  height: .666667rem;
}
#video{
  /* height: 8rem; */
  /* height: 5.6rem; */
  width: 100%;
}
.isFullScreen #video {
  width: auto;
}
.banner img {
  width: 100%;
  /* max-height: 8.053333rem; */
}
.isFullScreen .banner img {
  width: auto !important;
}

.btn_box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* justify-content: space-between; */
  padding: .373333rem 1.013333rem;
}
.btn_box > div {
  margin: 0 .466667rem;
}

.btn_box .btn_prev {
  width: .813333rem;
  height: .826667rem;
  background: url('../assets/img/btn_prev.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_reset {
  width: 1.053333rem;
  height: 1.053333rem;
  background: url('../assets/img/btn_reset.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_pause {
  width: 1.28rem;
  height: 1.28rem;
  background: url('../assets/img/btn_pause.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_play {
  width: 1.28rem;
  height: 1.28rem;
  background: url('../assets/img/btn_play.png') 0 0 no-repeat;
  background-size: contain;
}
.btn_box .btn_next {
  width: .813333rem;
  height: .826667rem;
  background: url('../assets/img/btn_next.png') 0 0 no-repeat;
  background-size: contain;
}

.answer_area {
  /* position: absolute; */
  /* bottom: 1.333333rem; */
  /* left: 0; */
  position: relative;
  height: 4.866667rem;
  width: 100%;
  background:linear-gradient(360deg,rgba(255,240,143,1) 0%,rgba(255,226,127,1) 100%);
  box-shadow: 0px -1px 7px 1px rgba(227,227,227,0.5);
  border-radius: .48rem .48rem 0 0;
  display: flex;
  margin-bottom: 1.333333rem;
}

.btn_question_voice {
  display: inline-block;
  width: 1.433333rem;
  height: 1.146667rem;
  background: url('../assets/img/btn_question.png') 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: -0.1rem;
  left: 0;
}


.answer_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: .6rem;
}


.answer_box .answer_item {
  display: inline-block;
  width: 3.946667rem;
  height: 3.946667rem;
  /* background: url('../assets/img/answer2.png') 0 0 no-repeat; */
  /* background-size: contain; */
  animation: blink 2s infinite ease;
  /* animation-delay: 1s; */
  animation-fill-mode: both;
  display: flex;
  align-items: center;
  justify-content: center;
}

.answer_box .answer_item img {
  width: 2.446667rem;
  height: 2.446667rem;
  border-radius: 50%;
}

.answer_box.four .answer_item img{
  width: 1.846667rem;
  height: 1.846667rem;
}
.isFullScreen .answer_box.two .answer_item img{
  width: 4.046667rem;
  height: 4.046667rem;
}
.isFullScreen .answer_box.three .answer_item img{
  width: 3.046667rem;
  height: 3.046667rem;
}
.isFullScreen .answer_box.four .answer_item img{
  width: 3.346667rem;
  height: 3.346667rem;
}

.isFullScreen .answer_box .answer_item img {
  transform: rotate(90deg);
}

@keyframes blink {
  0% { transform: scale(.9) }
  50% { transform: scale(1.1) }
  100% { transform: scale(.9) }
}

.answer img {
  /* width: 100%; */
  /* border-radius: 50%; */
}

.fullScreen {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: fill;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.fullScreenAudio {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: fill;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}

.fullScreenMenu {
  position: fixed;
  z-index: 99999;
  transform: rotate(90deg);
  transform-origin:0% 0%;
  top: 0;
  left: 1.593333rem;
  /* background: rgba(0, 0, 0, .4); */
  /* background-image: linear-gradient(transparent,rgba(0,0,0,.4)); */
  
  height: 1.593333rem;
  font-size: 12px;
}

.fullScreenMenu .right {
  margin-left: auto;
}
.fullScreenMenu i {
  margin-left: .666667rem;
}

.icon_play {
  display: inline-block;
  width: 1.093333rem;
  height: 1.093333rem;
  background: url('../assets/img/icon_play.png') 0 0 no-repeat;
  background-size: contain;
}
.android_play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999999;
  display: inline-block;
  width: 1.093333rem;
  height: 1.093333rem;
  background: url('../assets/img/icon_play_black.png') 0 0 no-repeat;
  background-size: contain;
  border-radius: 50%;
}
.isFullScreen .android_play {
  transform: rotate(90deg);
}
.icon_pause {
  display: inline-block;
  width: 1.093333rem;
  height: 1.093333rem;
  background: url('../assets/img/icon_pause.png') 0 0 no-repeat;
  background-size: contain;
}
.icon_prev {
  display: inline-block;
  width: .586667rem;
  height: .733333rem;;
  background: url('../assets/img/icon_prev.png') 0 0 no-repeat;
  background-size: contain;
}
.icon_next {
  display: inline-block;
  width: .586667rem;
  height: .733333rem;;
  background: url('../assets/img/icon_next.png') 0 0 no-repeat;
  background-size: contain;
}
.icon_reset {
  display: inline-block;
  width: .666667rem;
  height: .64rem;
  background: url('../assets/img/icon_reset.png') 0 0 no-repeat;
  background-size: contain;
}

.icon_fullScreen {
  display: inline-block;
  width: .533333rem;
  height: .533333rem;
  background: url('../assets/img/icon_fullScreen.png') 0 0 no-repeat;
  background-size: contain;
  z-index: 9999;
  position: absolute;
  right: .266667rem;
  bottom: 0.866667rem;
}

.isFullScreen .icon_fullScreen {
  position: fixed;
  left: 4%;
  bottom: 3%;
  top: auto;
}

.isFullScreen .pop_box .chuck_box {
  transform: rotate(90deg);
}
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-volume-control-container,
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button
{
  display: none;
}
.isFullScreen ::-webkit-media-controls-enclosure {
  position: relative;
  width: 60%;
  left: 13%;
}
video::-webkit-media-controls-panel {
  background: transparent;
}


</style>

<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("studyPageClass");

// import aplayer from 'vue-aplayer'

// import 'video.js/dist/video-js.css'
// import { videoPlayer } from 'vue-video-player'



export default {
  name: 'studyPageClass',
  data() {
    return {
      isAndroid: false,
      toggleFullScreenMenuShowStatus: true,
      showPop: false,
      answer: true,
      complete: false,
      activeQuestionIndex: null,
      activeInteractiveIndex: null,
      activeQuestion: {},
      subjectId: '',
      subjectInfo: {},
      audioPlay: true,
      voiceSrc: '',
      userAnswer: '',
      babyInfo: {},
      // rightReward: 4,
      // errorReward: 2,
      showChuckAni: false,
      addChuckNum: '',

      answerClassNum: '',
      fullScreenImgHeight: '',

      fullScreen: null,
      showControls: false,
      showFullScreenAnswerArea: false,
      showFullScreenAnswerAreaIcon: false,
      width: '',
      videoWidth: '',
      height: '100%',
      voiceDomCurrentTime: 0,

    }
  },

  watch: {
    showPop(newVal, oldVal) {   // 关闭弹窗时跳转到下一题
      if(!this.showPop) {
        if(this.userAnswer == this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswer) {
          // 如果交互有多个，进行下一项交互
          if(this.activeQuestion.bmOnlineSubjectContentExitList.length > 1) {
            if(this.activeInteractiveIndex + 1 == this.activeQuestion.bmOnlineSubjectContentExitList.length) {
              // this.complete = true;
              console.log('aaaaa')
            }else{
              this.activeInteractiveIndex ++;
            }
          }else{
            this.nextQues();
          }
        }

        if(this.complete) {
          this.$router.replace({
            name: 'myStudy',
          })
        }
      }

      
    },

    fullScreen(newVal, oldVal) {
      if(newVal == false) {
        this.height = '100%';
        this.width = 'auto'
        this.videoWidth = 'auto'

        this.fullScreenImgHeight = 'auto';
      }else{
        // this.fullScreenImgHeight = `calc(${this.width}px - 1.59rem)`;
        this.fullScreenImgHeight = `${this.width}px`;
      }

      if(this.isAndroid) {
        this.showControls = true;
      }else{
        if(!this.fullScreen) {
          this.showControls = true;
        }else{
          this.showControls = false;
        }
      }

      console.log(newVal)
      console.log(this.fullScreenImgHeight)
    },

    activeQuestionIndex(newVal, oldVal) {
      this.activeQuestion = this.subjectInfo.bmOnlineSubjectContents[newVal]
      this.showFullScreenAnswerAreaIcon = false;
      this.showFullScreenAnswerArea = false;
    },

    computedAnswerNum(newVal) {
      console.log(newVal);
      let activeQuestionIndex = newVal.activeQuestionIndex;
      let activeInteractiveIndex = newVal.activeInteractiveIndex;

      let arr = [];
      if(this.activeQuestion.bmOnlineSubjectContentExitList) {
        if(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].firstFileId) {
          arr.push(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].firstFileId)
        }
        if(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].secondFileId) {
          arr.push(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].secondFileId)
        }
        if(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileId) {
          arr.push(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].thirdFileId)
        }
        if(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileId) {
          arr.push(this.activeQuestion.bmOnlineSubjectContentExitList[activeInteractiveIndex].fourthFileId)
        }

        switch (arr.length) {
          case 1:
            this.answerClassNum = 'one'
            break;
          case 2:
            this.answerClassNum = 'two'
            break;
          case 3:
            this.answerClassNum = 'three'
            break;
          case 4:
            this.answerClassNum = 'four'
            break;
        
          default:
            break;
        }
      }

      
    },

  
  },

  created() {
    console.log(this.$route)
    this.subjectId = this.$route.params.subjectId
    this.initBabyInfo();
    
    var u = navigator.userAgent;
    if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
      this.isAndroid = true;
    }else{
      this.isAndroid = false;
    }

    this.fullScreen = false;

    console.log(this.showControls)

  },

  mounted() {
    // document.addEventListener('touchstart', () => {
    //   console.log('=====播放音视频=======')
    //   this.playAudio();
    // }, true)

    if(this.isAndroid) {
      this.audioPlay = false;

      // document.addEventListener('touchstart', (e) => {
      //   console.log('=====播放音视频=======')
      //   console.log(e.target.className);
      //   if(e.target.className == 'btn_play') {
      //     return
      //   }
      //   setTimeout(() => {
      //     this.playAudio();
      //   })
      // }, true)
    }

    


    // window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    //   if (window.orientation === 180 || window.orientation === 0) { 
    //     alert('竖屏状态！');
    //   } 
    //   if (window.orientation === 90 || window.orientation === -90 ){ 
    //     alert('横屏状态！');
    //   } 
    // }, false);
    
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initBabyInfo() {
      this.formGet({
        API: 'queryStudentByOpenId',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        console.log(res);
        this.babyInfo = res;
        this.initData();
      }).catch(err => {

      })
    },

    initData(type) {
      this.post({
        API: 'queryAllSubjectById',
        data: {
          subjectId: this.subjectId,
          studentId: this.babyInfo.studentId,
          subjectPackageId: this.$route.query.subjectPackageId,
        }
      }).then(res => {
        this.subjectInfo = res;
        // this.subjectInfo = this.testData;
        // console.log(this.subjectInfo)
        // this.subjectInfo.bmOnlineSubjectContents.forEach(item => {
        //   item.showNextBtn = false;
        // })

        let sessionQues = JSON.parse(localStorage.getItem(res.subjectId))
        // console.log(sessionQues);
        if(sessionQues) {
          if(sessionQues.index > this.subjectInfo.bmOnlineSubjectContents.length) {
            this.activeQuestion = this.subjectInfo.bmOnlineSubjectContents[0]
          }else{
            this.activeQuestion = this.subjectInfo.bmOnlineSubjectContents[sessionQues.index]
          }
          this.activeQuestionIndex = sessionQues.index;
          this.activeInteractiveIndex = 0;
        }else{
          this.activeQuestionIndex = 0;
          this.activeInteractiveIndex = 0;
          this.activeQuestion = this.subjectInfo.bmOnlineSubjectContents[0]
        }


        // 通过 id 获取音频图片播放地址
        this.initTotalUrl();
        

        this.activeQuestion.showInteractive = false
        
        // if(this.subjectInfo.isFinished == '1') {
        //   this.activeQuestion.showNextBtn = true;
        // }else{
        //   this.activeQuestion.showNextBtn = false;
        // }

        // console.log(this.subjectInfo)
        // console.log(this.activeQuestion)
      }).catch(err => {

      })
    },

    initImgUrl(vid, paraName, obj) {
      // console.log(this.activeQuestion)
      // 获取图片地址
      this.formGet({
        API: 'getImageInfoData',
        data: {
          imageId: vid,
        }
      }).then(res => {
        // console.log(res);
        if(res.imageInfo) {
          let url = res.imageInfo.url;
          // console.log(this.activeQuestion)
          if(obj) {
            this.$set(this.activeQuestion.bmOnlineSubjectContentExitList[obj.index], paraName, url)
          }else{
            this.$set(this.activeQuestion, paraName, url)
          }
          console.log(this.activeQuestion)
          this.$forceUpdate();

        }

      });
    },
    initAudioUrl(vid, paraName, obj) {
      // 获取音频地址
      this.formGet({
        API: 'getPlayInfoData',
        data: {
          videoId: vid
        }
      }).then(res => {
        // console.log(res);
        if(res.playInfoList) {
          let url = res.playInfoList[0].playURL;
          if(obj) {
            this.$set(this.activeQuestion.bmOnlineSubjectContentExitList[obj.index], paraName, url)
          }else{
            this.$set(this.activeQuestion, paraName, url)
          }
          this.$forceUpdate();
        }

      })
    },

    initTotalUrl() {
      if(this.activeQuestion.contentImageFile) {
        this.initImgUrl(this.activeQuestion.contentImageFile, 'contentImageUrl');
      }
      if(this.activeQuestion.contentAudioFile) {
        this.initAudioUrl(this.activeQuestion.contentAudioFile, 'contentAudioUrl');
      }
      
      if(this.activeQuestion.bmOnlineSubjectContentExitList) {
        this.activeQuestion.bmOnlineSubjectContentExitList.forEach((item, index) => {
          let obj = {
            index: index,
            item: item
          }
          if(item.firstFileId) {
            this.initImgUrl(item.firstFileId, 'firstFileUrl', obj);
          }
          if(item.secondFileId) {
            this.initImgUrl(item.secondFileId, 'secondFileUrl', obj);
          }
          if(item.thirdFileId) {
            this.initImgUrl(item.thirdFileId, 'thirdFileUrl', obj);
          }
          if(item.fourthFileId) {
            this.initImgUrl(item.fourthFileId, 'fourthFileUrl', obj);
          }
          if(item.questionAudioFile) {
            this.initAudioUrl(item.questionAudioFile, 'questionAudioUrl', obj);
          }

        })
      }

      // if(this.activeQuestion.iamgeAFile) {
      //   this.initImgUrl(this.activeQuestion.iamgeAFile, 'iamgeAUrl');
      // }
      // if(this.activeQuestion.iamgeBFile) {
      //   this.initImgUrl(this.activeQuestion.iamgeBFile, 'iamgeBUrl');
      // }
      // if(this.activeQuestion.questionAudioFile) {
      //   this.initAudioUrl(this.activeQuestion.questionAudioFile, 'questionAudioUrl');
      // }
    },

    submit(answer) {
      this.userAnswer = answer;
      this.showPop = true;
      let voiceDom = null;
      if(this.activeQuestion.fileType == 'video') {
        voiceDom = this.$refs.video;
      }else{
        voiceDom = this.$refs.audio;
      }

      voiceDom.pause();
      this.audioPlay = false;



      // 最后一题, 答对后, 提示完成
      // console.log(this.activeQuestionIndex)
      if(this.activeQuestionIndex + 1 == this.subjectInfo.bmOnlineSubjectContents.length && this.activeInteractiveIndex + 1 == this.activeQuestion.bmOnlineSubjectContentExitList.length) {
        // if(answer == this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswer)
        if(answer == this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswer) {
          this.studyCompleteVoicePlay();
          this.studyComplete();
        }else{
          this.complete = false;
        }
      }



      // 答题后，该题的答题次数增加 1
      // this.$set(this.activeQuestion, 'answerNum', answerNum);
      if(answer == this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswer) {
        if(!this.complete) {
          if(this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswerNum) {
            this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswerNum ++;
          }else{
            this.$set(this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex], 'trueAnswerNum', 1);
          }
          
          this.trueVoicePlay();

          if(this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswerNum && !this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].falseAnswerNum) {
            // 第一次答对，奖励2个
            console.log('奖励2个')
            this.rewardChuck(2)
          }else if (this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].trueAnswerNum && this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].falseAnswerNum == 1) {
            //第二次答对，奖励1个
            console.log('奖励1个')
            this.rewardChuck(1)
          }
        }
      }else{
        if(!this.complete) {
          if(this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].falseAnswerNum) {
            this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex].falseAnswerNum ++;
          }else{
            this.$set(this.activeQuestion.bmOnlineSubjectContentExitList[this.activeInteractiveIndex], 'falseAnswerNum', 1);
          }
          
          this.falseVoicePlay();
          // this.rewardChuck(this.errorReward)
        }
      }

      console.log(this.activeQuestion)
    },

    trueVoicePlay() {
      let trueVoice = this.$refs.trueVoice;
      this.answer = true;
      trueVoice.play();
    },
    falseVoicePlay() {
      let falseVoice = this.$refs.falseVoice;
      this.answer = false;
      falseVoice.play();
    },

    studyCompleteVoicePlay() {
      let completeVoice = this.$refs.completeVoice
      this.complete = true;
      completeVoice.play();
    },

    studyComplete() {
      this.post({
        API: 'insert',
        data: {
          studentId: this.babyInfo.studentId,
          subjectPackageSubjectId: this.$route.query.subjectPackageSubjectId,
        }
      }).then(res => {
        // this.rewardChuck(4); // 学完一课奖励4个
        if(this.subjectInfo.isFinished != 1) {
          this.showChuckAni = true;
          this.addChuckNum = 4;
          this.babyInfo.chuckCurrency = Number(this.babyInfo.chuckCurrency) + 4;
        }

        this.$notify({ type: 'success', message: '学习完成', duration: 1200 });
        // setTimeout(() => {
        //   this.$router.push({
        //     name: 'taskDetail',
        //     params: {
        //       openId: this.$route.params.openId
        //     }
        //   })
        // }, 1500)
      })
    },

    rewardChuck(chuckNum) {
      this.addChuckNum = chuckNum;
      this.post({
        API: 'chuckInsert',
        data: {
          studentId: this.babyInfo.studentId,
          subjectPackageId: this.$route.query.subjectPackageId,
          subjectId: this.activeQuestion.subjectId,
          subjectContentId: this.activeQuestion.subjectContentId,
          rewardNumber: chuckNum,
        }
      }).then(res => {
        console.log(res);
        if(res != -1) {   // 第一次答题，跳出增加查克币动画
          this.showChuckAni = true;
          this.babyInfo.chuckCurrency = Number(this.babyInfo.chuckCurrency) + chuckNum;
        }else{
          this.showChuckAni = false;
        }
      })
    },

    audioEnd() {
      console.log('音视频播放完毕')
      this.audioPlay = false;
      if(this.activeQuestion.isInteractive == 1) {
        this.$set(this.activeQuestion, 'showInteractive', true)
        if(this.fullScreen) {
          this.showFullScreenAnswerAreaIcon = true;
        }
        this.scrollToBottom();
        this.$forceUpdate();
        
        if(this.activeQuestion.bmOnlineSubjectContentExitList) {
          setTimeout(() => {
            this.playQuesVoice();
          })
        }
      }else{
        // 语音播放完后，没有交互，
        // this.$set(this.activeQuestion, 'showNextBtn', true)
        

        // 最后一题播放完毕后，提示完成, 清除localstorage, 跳转到列表页
        if(this.activeQuestionIndex == this.subjectInfo.bmOnlineSubjectContents.length - 1) {
          console.log('结束了')
          this.showPop = true;
          this.studyComplete();
          this.studyCompleteVoicePlay();


          let obj = {
            subjectId: this.activeQuestion.subjectId,
            index: 0
          }

          obj = JSON.stringify(obj);
          localStorage.setItem(this.activeQuestion.subjectId, obj);

          // console.log(JSON.parse(localStorage.getItem(this.activeQuestion.subjectId)))

          setTimeout(() => {
            console.log('结束')
          }, 1500)
          // setTimeout(() => {
          //   this.$router.replace({
          //     name: 'taskDetail',
          //     params: {
          //       openId: this.$route.params.openId,
          //       packageId: this.$route.params.subjectPackageId,
          //       time: '2020-02-12'
          //     }
          //   }, 1500)
          // })
        }else{
          this.nextQues();
          this.$forceUpdate();
        }
      }
      

    },

    playQuesVoice() {
      this.pauseAudio();
      let audioQues = this.$refs.audioQues;
      // console.log(audioQues)
      audioQues.play();
    },

    quesVoicePause() {
      let audioQues = this.$refs.audioQues;
      audioQues.pause();
    },


    audioLoad() {
      console.log('audioLoad完成')
     
    },

    resetAudio() {
      let voiceDom = null;
      if(this.activeQuestion.fileType == 'video') {
        voiceDom = this.$refs.video;
      }else{
        voiceDom = this.$refs.audio;
      }
      voiceDom.currentTime = 0;
    },
    playAudio() {
      console.log('======播放音视频playAudio=====')
      let voiceDom = null;
      if(this.activeQuestion.fileType == 'video') {
        voiceDom = this.$refs.video;
      }else{
        voiceDom = this.$refs.audio;
      }
      this.audioPlay = true;

      if(voiceDom) {
        voiceDom.play();
      }

      if(this.activeQuestion.questionAudioFile) {
        this.quesVoicePause();
      }
    },
    pauseAudio() {
      let voiceDom = null;
      if(this.activeQuestion.fileType == 'video') {
        voiceDom = this.$refs.video;
      }else{
        voiceDom = this.$refs.audio;
      }
      this.audioPlay = false;
      voiceDom.pause();
    },

    prevQues() {
      if(this.activeQuestionIndex == 0) {
        return false;
      }
      this.activeInteractiveIndex = 0;
      this.activeQuestionIndex --;
      this.audioPlay = true;
      this.playAudio();
      this.$forceUpdate();

      let obj = {
        subjectId: this.activeQuestion.subjectId,
        index: this.activeQuestionIndex
      }

      obj = JSON.stringify(obj);
      localStorage.setItem(this.activeQuestion.subjectId, obj);

      setTimeout(() => {
        this.initTotalUrl();
      })
    },
    nextQues() {
      if(this.activeQuestionIndex == this.subjectInfo.bmOnlineSubjectContents.length - 1) {
        return false;
      }
      this.activeInteractiveIndex = 0;
      this.activeQuestionIndex ++;

      // setTimeout(() => {
      //   audio.play();
      // })
      this.$forceUpdate();

      let obj = {
        subjectId: this.activeQuestion.subjectId,
        index: this.activeQuestionIndex
      }

      obj = JSON.stringify(obj);
      localStorage.setItem(this.activeQuestion.subjectId, obj);

      setTimeout(() => {
        this.initTotalUrl();
      })
      
      console.log(this.activeQuestion)
      console.log(this.activeQuestionIndex)
      setTimeout(() => {
        console.log(this.activeQuestion)
        this.playAudio();
      }, 300)
    },

    full() {
      this.fullScreen = true;
      
      let w = document.body.clientWidth;
      let h = document.body.clientHeight;

      if(this.isAndroid) {
        this.videoWidth = w;
      }else{
        this.videoWidth = w - 70;   // ios 底部前进后退栏处理
      }
      this.width = w
      this.height = h;

      

      this.$emit('isFullScreen', true);


      setTimeout(() => {
        this.toggleFullScreenMenuShowStatus = false;
      }, 5000)



    },
    exitFullScreen() {
      this.fullScreen = false;
      this.showFullScreenAnswerAreaIcon = false;
      console.log('退出全屏')
      this.$emit('isFullScreen', false);


      
    },

    showFullScreenMenu() {
      this.toggleFullScreenMenuShowStatus = true;
      setTimeout(() => {
        this.toggleFullScreenMenuShowStatus = false;
      }, 5000)
    },

    aniClass(index) {
      return `fly_chuck${index+1}`
    },

    clickShowFullScreenAnswerArea() {
      this.showFullScreenAnswerArea = !this.showFullScreenAnswerArea
    },


    scrollToBottom: function () {
      this.$nextTick(() => {
        var container = this.$refs.container;
        console.log(container)
        console.log(container.scrollHeight)
        console.log(document.documentElement.scrollTop)
        document.documentElement.scrollTop = container.scrollHeight;
        console.log(document.documentElement.scrollTop)
      });
    }

  },

  computed: {
    computedAnswerNum() {
      let {activeQuestionIndex, activeInteractiveIndex} = this;
      return {
        activeQuestionIndex,
        activeInteractiveIndex
      }
    },
    computedShowFullScreenAnswerArea() {

    },
    
    
    chuckAni() {
      if(this.showChuckAni) {
        return 'chuckAni'
      }
    },
    
  },

  components: {
    // aplayer,
    // videoPlayer,
  }
}
</script>

